/*

实时监测组件

 */

import React, { useEffect, useState } from 'react';
import leftTop from '../../images/rightTop.png';
import left from '../../images/left.png';
import Boxes from '../components/Boxes/Boxes';
import CircleCoordinate from '../components/CircleCoordinate';
import Selected from '../components/Selected';
import { ListData, cilcleData, rightTopData, topData } from '../index.config';
import smal from '../../images/smal_line.png';
import './index.less';

export default function index(props: any) {
  const { data } = props;
  const [seleteList, setSeleteList] = useState<any>([]);
  const [pageData, setPageData] = useState<any>({});
  const [values, setValues] = useState<string>(data[0]?.date);
  useEffect(() => {
    let allData: any = {};
    let list: any = [];
    data.forEach((val: any) => {
      // 数据格式转换、每个时间对应一行数据
      allData[val.date] = val;
      // 下拉时间数据
      list.push({
        value: val.date,
        label: val.date,
      });
    });
    setSeleteList(list);
    setPageData(allData);
  }, [data]);
  const handleChange = (val: any) => {
    setValues(val);
  };

  return (
    <div className="real-time-monitoring">
      <div className="real-time-select">
        {/* 下拉菜单 */}
        <Selected
          data={seleteList}
          handleChange={handleChange}
          values={values}
        />
      </div>
      {/* 推进卡片 */}
      <div className="real-time-left">
        <div className="real-time-left-title">
          <div className="text-title">推进控制</div>
          <img src={smal} alt="" className="left-img" />
        </div>
        <div className="real-time-left-top">
          {topData.map((val: any) => {
            const value = Number(pageData?.[values]?.[val?.key]).toFixed(1);
            return (
              <Boxes
                key={val.title}
                title={val.title}
                value={value}
                unit={val.inut}
              />
            );
          })}
        </div>
        <div className="real-time-left-bottom">
          <div className="left-bottom-content">
            <img src={left} />
          </div>
          <div className="left-bottom-list">
            {ListData.map((val) => {
              let value = Number(pageData?.[values]?.[val?.key]).toFixed(0);
              return (
                <Boxes
                  key={val.title}
                  title={val.title}
                  unit={val.inut}
                  className={val.className}
                  value={value}
                  url={val.imgUrl}
                />
              );
            })}
          </div>
        </div>
      </div>
      <div className="real-time-right">
        <div className="real-time-right-top">
          <div className="real-time-right-top-title">
            <div className="top-text">铰接控制</div>
            <img src={smal} alt="" className="top-title-img" />
          </div>
          <div className="right-top-content">
            <img src={leftTop} />
          </div>
          {/* 铰接卡片 */}
          <div className="right-top-list">
            {rightTopData.map((val) => {
              let value = Number(pageData?.[values]?.[val?.key]).toFixed(0);
              return (
                <Boxes
                  key={val.title}
                  title={val?.title}
                  className={val?.className}
                  value={value}
                  unit={val.inut}
                />
              );
            })}
          </div>
        </div>
        {/* 盾头盾尾 */}
        <div className="real-time-right-bottom">
          <div className="real-time-right-bottom-title">
            <div>姿态监测</div>
            <img src={smal} alt="" className="top-title-img" />
          </div>
          <div className="real-time-right-bottom-content">
            {cilcleData.map((val) => {
              let xData = Number(pageData?.[values]?.[val?.x]).toFixed(0);
              let yData = Number(pageData?.[values]?.[val?.y]).toFixed(0);
              return (
                <CircleCoordinate
                  key={val.title}
                  title={val.title}
                  circleCenter={val.circle}
                  x={xData}
                  y={yData}
                  titles={val.titles}
                />
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}
